@import  (reference)  "../../main";

@width : 50px;
@height: 26px;

.wdu-switch {
    .center();
}

.wdu-switch-switch {
    box-sizing   : border-box;
    overflow     : hidden;
    width        : @width;
    height       : @height;
    border-radius: (@height / 2);
    .inside-shadow-light();
    .w-border-light();
}

.wdu-switch-slide {
    width     : 72px;
    height    : 26px;
    transition: all .3s ease-in-out;
    position  : relative;
    top:-1px;
    left      : -24px;
    .row-col_center();
    background-color: rgb(245, 245, 245);
}

.wdu-switch-label {
    .w-normal-text();
    margin-right: 5px;
}

.wdu-switch-btn {
    min-width       : 24px;
    min-height      : 24px;
    background-color: white;
    .w-border-circle();
    .out-shadow-normal();
}

.wdu-state-dot {
    width : 10px;
    height: 10px;
    .w-border-circle();
}

.wdu-switch-open-dot {
    .wdu-state-dot();
    .w-bg-important();
}

.wdu-switch-close-dot {
    .wdu-state-dot();
    background-color: white;
    .inside-shadow-bold();
}

.wdu-switch-open,
.wdu-switch-close {
    min-width : 24px;
    min-height: 24px;
    .center();
}

.s-on {
    left: 0px;
}